<!--addTeacher.html-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"  crossorigin="anonymous">
  <title>添加教师</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    .main-container {
      display: flex;
      flex: 1;
    }
    aside {
      width: 190px; /* 左侧菜单宽度 */
      background-color: #171d1d;
    }
    .right-container {
      flex: 1;
      display: flex;
      flex-direction: column;/*除左侧菜单外，整个右半部分以垂直的形式布局*/
      background-color: white;
    }
    header {
      min-height: 60px; /* 头部高度 */
      text-align: center;
      padding: 10px;
      margin-bottom: 25px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .content {
      flex: 1;
      padding: 10px;
      overflow-y: auto; /* 主内容区域滚动 */
    }
    footer {
      background-color: #6e7272;
      color: white;
      height: 60px; /* 页脚高度 */
      text-align: center;
      padding: 10px;
      margin-top: 15px;
    }
  </style>
</head>
<body>
<div class="main-container">
  <!-- 左侧菜单 -->
  <aside th:replace="~{/layout/left_menu.html}"></aside>

  <!-- 右侧区域（头部 + 主内容 + 页脚） -->
  <div class="right-container">
    <!-- 头部区域 -->
    <header th:replace="~{/layout/header.html}"></header>

    <!-- 主内容区域 -->
    <div class="content">
      <form action="/Teacher/add" class="was-validated" method="post">

        <div class="form-group">
          <label for="name">Username:</label>
          <input type="text" class="form-control" id="name" placeholder="请输入教师姓名" name="name"  required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入教师姓名！</div>
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入密码！</div>
        </div>
        <div class="form-group">
          <label>性别:</label>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="sex" value="1" required>
            <label class="form-check-label">男</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="sex" value="0" required>
            <label class="form-check-label">女</label>
          </div>
        </div>
        <div class="form-group">
          <label for="birthday">生日:</label>
          <input type="date" class="form-control" id="birthday" name="birthday" required>
        </div>
        <div class="form-group">
          <label for="course_id">课程</label>
          <select class="form-control" name="course.id" id="course_id" th:object="${courses}" required>
            <option value="">请选择一个主教课程</option>
            <option th:each="course : ${courses}"
                    th:value="${course.id}"
                    th:text="${course.name}">
            </option>
          </select>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入教授课程！</div>
        </div>
        <div class="form-group">
          <label for="professional">专业</label>
          <input type="text" class="form-control" id="professional" placeholder="请输入专业" name="professional" required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入专业！</div>
        </div>
        <button type="submit" class="btn btn-primary">新增教师</button>
      </form>

    </div>

    <!-- 页脚区域 -->
    <footer th:replace="~{/layout/footer.html}"></footer>
  </div>
</div>
</body>
</html>